<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class="navigate-bar">
			<view class="navigate-bar-app"></view>
			<view class="navigate-bar-main">
				<view class="navigate-bar-left">
					<view class="navigate-bar-left-avatar" @tap="showDrawer()">
						<image class="navigate-bar-left-avatar-image" :src="loginUserInfo.avatar"></image>
						<view v-if="!isSocketOpen" class="navigate-bar-left-avatar-red-dot"></view>
						<view v-if="isSocketOpen" class="navigate-bar-left-avatar-green-dot"></view>
					</view>
				</view>
				<view class="navigate-bar-middle">好友列表</view>
				<view class="navigate-bar-right">
					<image @tap="gotoPage(3)" class="navigate-bar-right-icon" src="../../static/icon/search.png"></image>
				</view>
			</view>
		</view>
		<!-- 顶部占位标签 -->
		<view class="navigate-bar-space"></view>
		
		
		<u-index-list :indexList="indexList">
			<view slot="header" class="list">
				<view class="list__item" @tap="gotoPage(0)">
					<view style="position: relative;">
						<u-avatar shape="square" size="40" icon="bell-fill" fontSize="26" randomBgColor colorIndex="18"></u-avatar>
						<u-badge style="position: absolute;top: -10upx;right: -10upx;" :type="'error'" max="99" :value="totalUnread.notice"></u-badge>
					</view>
					<text class="list__item__user-name">通知</text>
				</view>
				<u-line></u-line>
				<view class="list__item" @tap="gotoPage(1)">
					<u-avatar shape="square" size="40" icon="weixin-fill" fontSize="26" randomBgColor colorIndex="9"></u-avatar>
					<text class="list__item__user-name">群聊</text>
				</view>
				<u-line></u-line>
				<view class="list__item" @tap="gotoPage(2)">
					<u-avatar shape="square" size="40" icon="qzone-circle-fill" fontSize="26" randomBgColor colorIndex="6"></u-avatar>
					<text class="list__item__user-name">空间</text>
				</view>
				<u-line></u-line>
			</view>
			<template v-for="(item, index) in friendListShow">
				<!-- #ifdef APP-NVUE -->
				<u-index-anchor v-if="item.length!==0" :text="indexList[index]" :key="index"></u-index-anchor>
				<!-- #endif -->
				<u-index-item :key="index">
					<!-- #ifndef APP-NVUE -->
					<u-index-anchor v-if="item.length!==0" :text="indexList[index]"></u-index-anchor>
					<!-- #endif -->
					<view class="list" v-for="(item1, index1) in item" :key="index1">
						<view class="list__item" @tap="gotoFriendInfo(item1.id)">
							<image class="list__item__avatar" :src="item1.url"></image>
							<text class="list__item__user-name">{{item1.name}}</text>
						</view>
						<u-line></u-line>
					</view>
				</u-index-item>
			</template>
			<view slot="footer" class="u-safe-area-inset--bottom">
				<text class="list__footer">共{{friendList.length}}位好友</text>
			</view>
		</u-index-list>
		
		<!-- 底部导航栏 -->
		<u-tabbar
			:value="value"
			:placeholder="false"
			@change="name => changeTab(name)"
			:fixed="true"
			:safeAreaInsetBottom="false"
		>
			<u-tabbar-item text="消息" icon="chat-fill" :badge="totalUnread.message" ></u-tabbar-item>
			<u-tabbar-item text="联系人" icon="account-fill" :badge="totalUnread.notice"></u-tabbar-item>
		</u-tabbar>
		<!-- 侧边栏 -->
		 <unidrawer ref="draw" :mask="true" :width="280" :mode="'left'">
			<sideview></sideview>
		</unidrawer>
	</view>
	
</template>

<script>
	const indexList = () => {
		const indexList = []
		const charCodeOfA = 'A'.charCodeAt(0)
		indexList.push("↑")
		indexList.push("☆")
		for (let i = 0; i < 26; i++) {
			indexList.push(String.fromCharCode(charCodeOfA + i))
		}
		indexList.push('#')
		return indexList
	}
	import {mapGetters} from 'vuex';
	import stringUtil from '@/util/stringUtil.js';
	import unidrawer from '@/uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue';
	import sideview from '@/components/sideView/sideview.vue';
	import $store from '@/store/index.js';
	export default {
		components:{
			unidrawer:unidrawer,
			sideview:sideview
		},
		computed: {
			...mapGetters(['loginUserInfo', 'isSocketOpen','friendListShow','friendList','totalUnread'])
		},
		onPullDownRefresh() {
			///重新获取连接websocket
			if(!$store.state.isSocketOpen){
				websocket.initConnect()
			}
			///从新获取消息列表
			$store.dispatch('getNoticeList')
			setTimeout(()=>{
				if($store.state.isSocketOpen){
					uni.showToast({
						icon:'success',
						title:'刷新成功！'
					})
				}
				else{
					uni.showToast({
						icon:'error',
						title:'刷新失败！'
					})
				}
				uni.stopPullDownRefresh()
			},500)
		},
		data() {
			return {
				value: 1,
				indexList: indexList(),
				itemArr:[]
			}
		},
		onLoad() {
			uni.hideTabBar();
		},
		created() {
			
			
		},
		methods:{
			gotoFriendInfo(id){
				uni.navigateTo({
					url:'/pages/info/friend-info?id='+id
				})
			},
			//去搜索页面
			gotoPage(i){
				switch(i){
					case 3:
					uni.navigateTo({
						url:'/pages/search/search'
					})
					break;
					case 1:
					uni.navigateTo({
						url:'/pages/list/group-list'
					}) 
					break;
					case 2:
					uni.showToast({
						icon:'none',
						title:'暂未开放'
					})
					break;
					case 0:
					uni.navigateTo({
						url:'/pages/list/notice-list'
					})
					break;
				}
				
			},
			changeTab(e){
				switch(e){
					case 0:
						uni.switchTab({
							url:'/pages/index/index'
						})
						break;
				}
			},
			//显示抽屉
			showDrawer(){
				this.$refs.draw.open();
			},
			hideDrawer(){
				this.$refs.draw.close();
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url('@/static/css/navigate-bar.css');
	.list__item:active{
		background-color: #e8e8e8;
	}
	.list {
		
		&__item {
			@include flex;
			padding: 6px 12px;
			align-items: center;
			
			&__avatar {
				height: 40px;
				width: 40px;
				border-radius: 3px;
			}
			
			&__user-name {
				font-size: 16px;
				margin-left: 10px;
				color: $u-main-color;
			}
		}
		
		&__footer {
			color: $u-tips-color;
			font-size: 14px;
			text-align: center;
			margin: 15px 0;
		}
	}
	.u-safe-area-inset--bottom{
		height: 150rpx;
		text-align: center;
	}
</style>
